<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

	<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

	<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>支付宝电脑网站支付</title>
<style>
* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
		sans-serif;
}

.tab-head {
	margin-left: 120px;
	margin-bottom: 10px;
}

.tab-content {
	clear: left;
	display: none;
}

h2 {
	border-bottom: solid #02aaf1 2px;
	width: 200px;
	height: 25px;
	margin: 0;
	float: left;
	text-align: center;
	font-size: 16px;
}

.selected {
	color: #FFFFFF;
	background-color: #02aaf1;
}

.show {
	clear: left;
	display: block;
}

.hidden {
	display: none;
}

.new-btn-login-sp {
	padding: 1px;
	display: inline-block;
	width: 75%;
}

.new-btn-login {
	background-color: #02aaf1;
	color: #FFFFFF;
	font-weight: bold;
	border: none;
	width: 100%;
	height: 30px;
	border-radius: 5px;
	font-size: 16px;
}

#main {
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
}

.red-star {
	color: #f00;
	width: 10px;
	display: inline-block;
}

.null-star {
	color: #fff;
}

.content {
	margin-top: 5px;
}

.content dt {
	width: 100px;
	display: inline-block;
	float: left;
	margin-left: 20px;
	color: #666;
	font-size: 13px;
	margin-top: 8px;
}

.content dd {
	margin-left: 120px;
	margin-bottom: 5px;
}

.content dd input {
	width: 85%;
	height: 28px;
	border: 0;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
}

#foot {
	margin-top: 10px;
	position: absolute;
	bottom: 15px;
	width: 100%;
}

.foot-ul {
	width: 100%;
}

.foot-ul li {
	width: 100%;
	text-align: center;
	color: #666;
}

.note-help {
	color: #999999;
	font-size: 12px;
	line-height: 130%;
	margin-top: 5px;
	width: 100%;
	display: block;
}

#btn-dd {
	margin: 20px;
	text-align: center;
}

.foot-ul {
	width: 100%;
}

.one_line {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #eeeeee;
	width: 100%;
	margin-left: 20px;
}

.am-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: box;
	width: 100%;
	position: relative;
	padding: 7px 0;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background: #1D222D;
	height: 50px;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	box-pack: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	box-align: center;
}

.am-header h1 {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	box-flex: 1;
	line-height: 18px;
	text-align: center;
	font-size: 18px;
	font-weight: 300;
	color: #fff;
}
</style>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
	<header class="am-header">
	<h1>支付宝订单支付页面</h1>
	</header>

	<div style="width: 70%;margin-left: 170px;margin-top: 70px">
	 <form name=alipayment action=alipay.trade.page.pay.jsp method=post target="_blank">
		<div class="form-group row" id="body1" class="show" name="divcontent">
			<label for="WIDout_trade_no" class="col-sm-2 col-form-label">机票订单号 ：</label>
			<div class="col-sm-10">
				<input type="text" readonly class="form-control-plaintext" id="WIDout_trade_no" name="WIDout_trade_no" value="email@example.com">
			</div>
		</div>

		<div class="form-group row">
			<label for="WIDsubject" class="col-sm-2 col-form-label">机票信息 ：</label>
			<div class="col-sm-10">
				<input type="text" readonly class="form-control-plaintext" id="WIDsubject" name="WIDsubject" value="机票">
			</div>
		</div>

		<div class="form-group row">
			<label for="WIDtotal_amount" class="col-sm-2 col-form-label">机票价格 ：</label>
			<div class="col-sm-10">
				<input type="text" readonly class="form-control-plaintext" id="WIDtotal_amount" name="WIDtotal_amount" value="机票">
			</div>
		</div>
		<div class="form-group row">
			<label for="WIDbody" class="col-sm-2 col-form-label">商品描述 ：</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="WIDbody" name="WIDbody" placeholder="请输入该商品的描述">
			</div>
		</div>

		 <br>

		<span class="scroll-pane">
			<button class="btn btn-success active btn-block" type="submit"
					style="text-align: center;">付 款</button>
		</span>
		 <br>
		<span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>

	 </form>
	</div>

<%--	<div id="main">--%>
<%--		<div id="tabhead" class="tab-head">--%>
<%--			<h2 id="tab1" class="selected" name="tab">付 款</h2>--%>
<%--			<h2 id="tab2" name="tab">交 易 查 询</h2>--%>
<%--			<h2 id="tab3" name="tab">退 款</h2>--%>
<%--			<h2 id="tab4" name="tab">退 款 查 询</h2>--%>
<%--			<h2 id="tab5" name="tab">交 易 关 闭</h2>--%>
<%--		</div>--%>
<%--		<form name=alipayment action=alipay.trade.page.pay.jsp method=post--%>
<%--			target="_blank">--%>
<%--			<div id="body1" class="show" name="divcontent">--%>
<%--				<dl class="content">--%>
<%--					<dt>商户订单号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDout_trade_no" name="WIDout_trade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>订单名称 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDsubject" name="WIDsubject" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>付款金额 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDtotal_amount" name="WIDtotal_amount" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>商品描述：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDbody" name="WIDbody" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt></dt>--%>
<%--					<dd id="btn-dd">--%>
<%--						<span class="new-btn-login-sp">--%>
<%--							<button class="new-btn-login" type="submit"--%>
<%--								style="text-align: center;">付 款</button>--%>
<%--						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>--%>
<%--					</dd>--%>
<%--				</dl>--%>
<%--			</div>--%>
<%--		</form>--%>
<%--		<form name=tradequery action=alipay.trade.query.jsp method=post--%>
<%--			target="_blank">--%>
<%--			<div id="body2" class="tab-content" name="divcontent">--%>
<%--				<dl class="content">--%>
<%--					<dt>商户订单号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>支付宝交易号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTQtrade_no" name="WIDTQtrade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt></dt>--%>
<%--					<dd id="btn-dd">--%>
<%--						<span class="new-btn-login-sp">--%>
<%--							<button class="new-btn-login" type="submit"--%>
<%--								style="text-align: center;">交 易 查 询</button>--%>
<%--						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易查询”按钮，即表示您同意该次的执行操作。</span>--%>
<%--					</dd>--%>
<%--				</dl>--%>
<%--			</div>--%>
<%--		</form>--%>
<%--		<form name=traderefund action=alipay.trade.refund.jsp method=post--%>
<%--			target="_blank">--%>
<%--			<div id="body3" class="tab-content" name="divcontent">--%>
<%--				<dl class="content">--%>
<%--					<dt>商户订单号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>支付宝交易号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTRtrade_no" name="WIDTRtrade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>退款金额 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>退款原因 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>退款请求号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTRout_request_no" name="WIDTRout_request_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt></dt>--%>
<%--					<dd id="btn-dd">--%>
<%--						<span class="new-btn-login-sp">--%>
<%--							<button class="new-btn-login" type="submit"--%>
<%--								style="text-align: center;">退 款</button>--%>
<%--						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款”按钮，即表示您同意该次的执行操作。</span>--%>
<%--					</dd>--%>
<%--				</dl>--%>
<%--			</div>--%>
<%--		</form>--%>
<%--		<form name=traderefundquery--%>
<%--			action=alipay.trade.fastpay.refund.query.jsp method=post--%>
<%--			target="_blank">--%>
<%--			<div id="body4" class="tab-content" name="divcontent">--%>
<%--				<dl class="content">--%>
<%--					<dt>商户订单号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>支付宝交易号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDRQtrade_no" name="WIDRQtrade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>退款请求号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDRQout_request_no" name="WIDRQout_request_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt></dt>--%>
<%--					<dd id="btn-dd">--%>
<%--						<span class="new-btn-login-sp">--%>
<%--							<button class="new-btn-login" type="submit"--%>
<%--								style="text-align: center;">退 款 查 询</button>--%>
<%--						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“退款查询”按钮，即表示您同意该次的执行操作。</span>--%>
<%--					</dd>--%>
<%--				</dl>--%>
<%--			</div>--%>
<%--		</form>--%>
<%--		<form name=tradeclose action=alipay.trade.close.jsp method=post--%>
<%--			target="_blank">--%>
<%--			<div id="body5" class="tab-content" name="divcontent">--%>
<%--				<dl class="content">--%>
<%--					<dt>商户订单号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt>支付宝交易号 ：</dt>--%>
<%--					<dd>--%>
<%--						<input id="WIDTCtrade_no" name="WIDTCtrade_no" />--%>
<%--					</dd>--%>
<%--					<hr class="one_line">--%>
<%--					<dt></dt>--%>
<%--					<dd id="btn-dd">--%>
<%--						<span class="new-btn-login-sp">--%>
<%--							<button class="new-btn-login" type="submit"--%>
<%--								style="text-align: center;">交 易 关 闭</button>--%>
<%--						</span> <span class="note-help">商户订单号与支付宝交易号二选一，如果您点击“交易关闭”按钮，即表示您同意该次的执行操作。</span>--%>
<%--					</dd>--%>
<%--				</dl>--%>
<%--			</div>--%>
<%--		</form>--%>
<%--		<div id="foot">--%>
<%--			<ul class="foot-ul">--%>
<%--				<li>支付宝版权所有 2015-2018 ALIPAY.COM</li>--%>
<%--			</ul>--%>
<%--		</div>--%>
<%--	</div>--%>
</body>
<script language="javascript">
	var tabs = document.getElementsByName('tab');
	var contents = document.getElementsByName('divcontent');
	
	(function changeTab(tab) {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        tabs[i].onmouseover = showTab;
	    }
	})();
	
	function showTab() {
	    for(var i = 0, len = tabs.length; i < len; i++) {
	        if(tabs[i] === this) {
	            tabs[i].className = 'selected';
	            contents[i].className = 'show';
	        } else {
	            tabs[i].className = '';
	            contents[i].className = 'tab-content';
	        }
	    }
	}
	
	function GetDateNow() {
		var vNow = new Date();
		var sNow = "";
		sNow += String(vNow.getFullYear());
		sNow += String(vNow.getMonth() + 1);
		sNow += String(vNow.getDate());
		sNow += String(vNow.getHours());
		sNow += String(vNow.getMinutes());
		sNow += String(vNow.getSeconds());
		sNow += String(vNow.getMilliseconds());
		document.getElementById("WIDout_trade_no").value =  sNow;
		document.getElementById("WIDsubject").value = "机票";
		document.getElementById("WIDtotal_amount").value = "100";
	}
	GetDateNow();
</script>
</html>